<template>
    <div class="body">
        <div class="view-list" @click="onViewSkip">
            <a href="#active-1"><div selectId="active-1" :class="selectView == 'active-1'?'active':''">商品</div></a>
            <a href="#active-2"><div selectId="active-2" :class="selectView == 'active-2'?'active':''">规格</div></a>
            <a href="#active-3"><div selectId="active-3" :class="selectView == 'active-3'?'active':''">介绍</div></a>
            <a href="#active-4"><div selectId="active-4" :class="selectView == 'active-4'?'active':''">评论</div></a>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" id="active-1">
            <van-swipe-item v-for="(item,index) of banner" :key="index">
                <van-image use-loading-slot class="grid-pic" :src="$store.getters.base_url+item">
                    <van-loading
                        slot="loading"
                        type="spinner"
                        size="20"
                        vertical
                    />
                </van-image>
            </van-swipe-item>
        </van-swipe>
            <p class="title">{{productInfo.name}}</p>
            <p class="price">
                <span class="price">￥{{parseFloat(price.price).toFixed(2)}}</span>
                <span class="name">/{{price.name}}</span>
            </p>
            <div class="spec" id="active-2">
                <div class="item" v-for="(item,index) of sku.tree[0].v" :key="index">
                    <p>规格</p>
                    <p>{{item.name}}</p>
                </div>
            </div>
            <van-cell-group>
                <van-cell title="商品介绍" id="active-3"/>
            </van-cell-group>
            <div v-html="productInfo.description" class="detail"></div>
            <van-goods-action class="add-content">
                <van-goods-action-icon icon="cart-o" text="购物车" :badge="cart" @click="$router.push('/cart')" />
                <van-goods-action-icon icon="star-o" text="收藏" />
                <van-goods-action-button
                    type="warning"
                    text="加入购物车"
                    @click="onClickButton"
                />
                <!-- <van-goods-action-button
                    type="danger"
                    text="立即购买"
                    @click="onClickButton"
                /> -->
        </van-goods-action>
        <van-sku
        v-model="showClassInfo"
        :sku="sku"
        :goods="goods"
        :goods-id="1"
        :quota="0"
        :quota-used="0"
        :show-add-cart-btn="false"
        buy-text="加入购物车"
        @buy-clicked="onBuyClicked"
        @sku-selected="onSelectClicked"
        />
    </div>
</template>
<script>
import {goodInfo,AddCart,CartNum} from '../ajax'
import {Toast} from 'vant'
export default {
    data() {
        return {
            showClassInfo:false,
            banner:[],
            price:{},
            productInfo:{},
            selectView:'active-1',
            cart:0,
            sku: {
            // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
            // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                        {
                            k: '规格', // skuKeyName：规格类目名称
                            v: [],
                            k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                        }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [],
                price: '', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                none_sku: false, // 是否无规格商品
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
            // 默认商品 sku 缩略图
            picture: 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
            }
        }
    },
    created(){
        this.getGoodInfo();
        this.getCartNum();
    },
    methods:{
        onViewSkip(e){
            if(!e.target.getAttribute('selectId')) return;
            this.selectView = e.target.getAttribute('selectId');
        //    var anchor = this.$el.querySelector(`#${this.selectView}`)
        //    console.log(anchor);
            // document.body.scrollTop = anchor.offsetTop
        },
        getCartNum(){
            const data = {
                uid:this.$store.getters.wxUserInfo.userinfo.id
            }
            CartNum(data).then(res=>{
                // console.log(res);
                this.cart = res;
            })
        },
        getGoodInfo(){
            // console.log(this.$route.query.id);
            const data = {
                admin_id:this.$store.getters.admin_id,
                goods_id:this.$route.query.id
            }
            goodInfo(data).then(res=>{
                console.log(res);
                this.good = res;
                this.sku.list = res.productAttr
                let arr1 = [];
                for(let i of res.productAttr){
                    let obj = {}
                    obj.id = i.goods_id;
                    obj.price = parseFloat(i.price)*100;
                    obj.s1 = i.id;
                    obj.stock_num = i.stock
                    arr1.push(obj);
                }
                let arr2 = [];
                for(let i of res.productAttr){
                    let obj = {}
                    obj.id = i.id;
                    obj.name = i.name;
                    obj.imgArr = (i.pic).split(',');
                    obj.imgUrl = this.$store.getters.base_url+(i.pic).split(',')[0];
                    obj.previewImgUrl = this.$store.getters.base_url+(i.pic).split(',')[0];
                    arr2.push(obj);
                }
                this.goods.picture = this.$store.getters.base_url+(res.productAttr[0].pic).split(',')[0]
                this.sku.price = res.productAttr[0].price
                this.sku.stock_num = res.productInfo.stock
                this.sku.list = arr1;
                this.sku.tree[0].v = arr2;
                this.sku.productAll = res;
                this.banner = (res.productAttr[0].pic).split(',');
                this.price.price = res.productAttr[0].price;
                this.price.name = res.productAttr[0].name;
                this.productInfo = res.productInfo;
            })
        },
        onClickButton() {
            // Toast('点击按钮');
            this.showClassInfo = !this.showClassInfo
        },
        onBuyClicked(skuData){
            const data = {
                cate_id:this.sku.productAll.productInfo.cate_id,
                uid:this.$store.getters.wxUserInfo.userinfo.id,
                goods_id:skuData.goodsId,
                goods_specific_id:skuData.selectedSkuComb.s1,
                num:skuData.selectedNum
            }
            AddCart(data).then(res=>{
                Toast("添加成功");
            })
        },
        onSelectClicked(data){
            console.log(data);
            this.price.price = (data.selectedSkuComb.price)/100+'.00';
            this.price.name = data.skuValue.name;
            this.banner = data.skuValue.imgArr;
        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#fff;
    $red:#FF5245;
    $gray:#9B9B9B;
    .body{
        .title{
            padding: 0.4rem 1rem;
            font-size: 1.2rem;
            font-weight: bolder;
        }
        .price{
            .price{
                font-size: 1.4rem;
                font-weight: bolder;
                color: $red;
                padding: 0 1rem;
            }
            .name{
                font-size: 0.8rem;
                color: $gray;
            }
        }
        .spec{
            width: 90%;
            height: 4rem;
            background: #F7F7F7;
            margin: 1rem auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .item{
                text-align: center;
                height: 3rem;
                // line-height: 2rem;
                justify-content: space-around;
                display: flex;
                flex-direction: column;
                :first-child{
                    font-size: 1rem;
                    font-weight: bolder;
                }
                :last-child{
                    font-size: 0.8rem;
                    color: $gray;
                }
            }
        }
        .view-list{
            width: 100%;
            height: 3rem;
            position: fixed;
            background: #fffc;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            line-height: 3rem;
            a{
                color: #000;
            }
            .active{
                color: $green;
                font-weight: 600;
                border-bottom: 0.2rem solid $green;
            }
        }
        .detail{
            width: 100%;
        }
        .my-swipe .van-swipe-item {
        color: $white;
        font-size: 20px;
        height: 16rem;
        text-align: center;
        }
        .content {
            padding: 16px 16px 160px;
        }
        .grid-pic{
            width: 100%;
            height: 100%;
        }
    }
</style>